<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-if</title>
    <script src = "js/vue.js"></script>
</head>
<!--
v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染
-->
<body>

<div id="app">
    <!--在 <input type="checkbox"> 中，v-model 默认绑定的是 checked 的值。
    这意味着 v-model="sel" 会将复选框的选中状态（true 或 false）绑定到 Vue 实例中的 sel 变量。-->
    <input type="checkbox" v-model="sel"/>是否同意条款[v-if实现]
    <!--
    老师解读 v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件 <h1>
    -->
    <h1 v-if="sel">你同意条款</h1>
    <h1 v-else>你不同意条款</h1>
</div>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            sel: false
        }
    })
</script>
</body>

</html>